<template id="carActionRequest-update">
  <!-- 采购付款申请抽屉 -->
  <v-navigation-drawer v-if="isUpdateDrawerShown" v-model="isUpdateDrawerShown" :permanent="isUpdateDrawerShown" fixed
    temporary right width="80%" class="elevation-24">
    <v-form ref="createForm" lazy-validation>
      <!-- 抽屉标题 -->
      <v-row>
        <span class="text-subtitle-1 font-weight-medium pa-6 pl-7">{{ticketType}}-更新</span>
        <v-spacer></v-spacer>
        <!-- 抽屉操作按钮 -->
        <v-row class="justify-end mx-0 mt-6 px-8">
          <v-btn color="success" @click="doUiAction('updateItem')" small>提交</v-btn>
          <v-btn class="elevation-0 ml-2" @click="isUpdateDrawerShown = false" small>取消</v-btn>
        </v-row>
      </v-row>

      <!-- 抽屉内容 -->

      <v-card class="mx-4 mb-4">


        <v-card-text>申请项</v-card-text>
        <v-container class="pa-0">
          <v-card elevation="0" outlined>

            <!-- 发车申请表格 -->
            <v-data-table class="elevation-0 mt-0 mb-xs-4 flex-fill d-flex flex-column" :loading="isTableLoading"
              :headers="headers" :items="[updateItem.ticketContentRequest]" hide-default-footer disable-pagination>

              <template v-slot:item.car-id="{ item }">
                <v-text-field class="jh-v-input mr-2" filled dense single-line label="车辆编号" v-model="item.carId"
                  readonly>
                </v-text-field>
              </template>

              <template v-slot:item.car-number="{ item }">
                <v-text-field class="jh-v-input mr-2" filled dense single-line label="车牌号" v-model="item.carNumber"
                  readonly>
                </v-text-field>
              </template>

              <template v-slot:item.current-kilometers="{ item }">
                <v-text-field class="jh-v-input mr-2" filled dense single-line label="目前公里数"
                  v-model="item.currentKilometers">
                </v-text-field>
              </template>

              <template v-slot:item.dispatch-fuel="{ item }">
                <v-text-field class="jh-v-input mr-2" filled dense single-line label="目前燃油量"
                  v-model="item.dispatchFuel">
                </v-text-field>
              </template>


            </v-data-table>
          </v-card>
          <!-- <v-btn class="add-btn" @click="doUiAction('addItem')" width="100%" v-if="ticketType==='flow'">添加申请项
                    </v-btn> -->
        </v-container>

        <v-card-text>工单描述</v-card-text>
        <v-textarea class="jh-v-input" dense single-line filled v-model="updateItem.ticketDesc"></v-textarea>


      </v-card>


    </v-form>
    <!-- 抽屉关闭按钮 -->
    <v-btn elevation="0" color="success" fab absolute top left small tile class="drawer-close-float-btn"
      @click="isUpdateDrawerShown = false">
      <v-icon>mdi-close</v-icon>
    </v-btn>
  </v-navigation-drawer>
</template>

<script type="module">
  Vue.component("carActionRequest-update", {
    template: '#carActionRequest-update',
    props: {
    },
    data: () => ({
      validationRules: {
        requireRules: [
          v => !!v || '必填',
        ],
        numberRules: [
          v => (!isNaN(v) && parseInt(v) > 0) || '数字必填'
        ]
      },
      constantObj: {},

      isTableLoading: false,
      headers: [
        { text: "车辆编号", value: "car-id", class: 'fixed', cellClass: 'fixed' },
        { text: "车牌号", value: "car-number" },
        { text: "目前公里数", value: "current-kilometers" },
        { text: "目前燃油量", value: "dispatch-fuel" },
      ],

      orderIds: [],
      orderList: [],
      actionType: '',
      expands: [],

      isUpdateDrawerShown: false,
      updateActionData: {},

      updateItem: {
        ticketContentRequest: {}
      }
    }),
    computed: {
      ticketType() {
        return this.updateItem.ticketType || ''
      },
    },
    async created() {
    },
    async mounted() {
    },
    methods: {
      async doUiAction(uiActionId, uiActionData) {
        try {
          switch (uiActionId) {
            case 'startUpdateItem':
              await this.prepareCreateFormData(uiActionData);
              await this.openCreateDrawer();
              break;
            case 'updateItem':
              await this.prepareCreateValidate();
              await this.confirmCreateItemDialog();
              await this.prepareDoCreateItem();
              await this.doCreateItem();
              await this.closeCreateDrawer();
              break;
            default:
              console.error("[doUiAction] uiActionId not find", { uiActionId });
              break;
          }
        } catch (error) { await window.jhMask.hide(); throw error; }
      },

      // ---------- 初始化数据 uiAction >>>>>>>>>> --------
      async prepareCreateFormData(item) {
        this.updateItem = {
          ..._.cloneDeep(item),
          ticketContentRequest: JSON.parse(item.ticketContentRequest || '{}')
        };
        this.actionType = item.actionType
      },

      async openCreateDrawer() {
        this.isUpdateDrawerShown = true;
      },
      // ---------- <<<<<<<<<<< 初始化数据 uiAction ---------

      // ---------- 新增数据 uiAction >>>>>>>>>> --------
      async prepareCreateValidate() {
        if (await this.$refs.createForm.validate()) {
          return true;
        }
        await window.vtoast.fail("请完善表单信息");
        throw new Error("请完善表单信息")
      },
      async confirmCreateItemDialog() {
        if (await window.confirmDialog({ title: "提交", content: "确定提交吗？" }) === false) {
          throw new Error("[confirmCreateFormDialog] 否");
        }
      },
      prepareDoCreateItem() {
        const { ticketDesc, ticketContentRequest} = this.updateItem
        this.updateActionData = {
          ticketDesc,
          ticketContentRequest: JSON.stringify(ticketContentRequest)
        }
      },
      async doCreateItem() {
        await window.vtoast.loading("提交数据");
        await window.jianghuAxios({
          data: {
            appData: {
              pageId: 'ticketManagement',
              actionId: 'updateItem',
              actionData: this.updateActionData,
              where: {
                ticketId: this.updateItem.ticketId
              }
            }
          }
        })
        await window.vtoast.success("提交成功");
      },
      async closeCreateDrawer() {
        this.isUpdateDrawerShown = false;
        this.updateActionData = null;
        this.$emit("success");
      },
      // ---------- <<<<<<<<<<< 新增数据 uiAction ---------
    }
  })
</script>
<style>
  .jh-v-input .v-messages-outer,
  .jh-v-input .v-text-field__details {
    bottom: -15px !important;
  }
</style>